<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浮动场景1：图片与文字环绕</title>
		<style>
			img{
				/*图片脱离文档流--文字包含在图片周边*/
				float: left;
				margin-right: 50px; /*图片与文字链接处间隙*/
				margin-bottom: 50px;/*图片与文字链接处间隙*/
			}
			p{
				font-size: 16px; /*页面默认字体尺寸*/
				line-height: 20px;/*浮动文字，行高无法设定*/
				word-spacing: 20px;
			}
		</style>
	</head>
	<body>
		<h1>浮动之图片环绕</h1>
		<img src="img/1.png" alt="小哀" width="250px " height="250px">
		<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium, perferendis? Porro accusamus voluptate incidunt magnam. Officiis consequatur porro debitis impedit, quos amet similique fugiat mollitia recusandae enim totam est delectus!  Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed, voluptates vero deleniti ut incidunt alias atque voluptate necessitatibus corporis excepturi dolorum possimus consectetur quam accusantium quisquam. Molestiae voluptates vitae quae.  Lorem, ipsum dolor sit amet consectetur adipisicing elit. Non, expedita. Sit mollitia facere, consequuntur doloribus quam corrupti ut repellendus perspiciatis ex adipisci, exercitationem fugit deleniti vitae! Consequatur maxime veritatis ratione!</p>
	</body>
</html>